<template>
	<view>
		<view class="bg-gradual-blue padding-lr-xl padding-tb-sm text-center shadow" >
			<view >
				<image class="shadow" :src="data.cover" style="height: 266upx;width: 200upx;" ></image>
				<view class="text-xl text-bold" style="line-height: 60upx;">{{data.title}}</view>
				<view v-if="data.author" class="text-bot">{{data.author}} · {{data.majorCateV2}} · {{data.minorCateV2}}</view>
			</view>
		</view>
		
		<view class="bg-white shadow">
			<view class="grid margin-lr-sm padding-tb-sm text-center col-4 solid-bottom">
				<view class="text-center padding-tb-sm" style="font-size: 22upx;" v-if="data.wordCount">
					<text style="font-size: 36upx;font-weight: 600;padding-right: 5upx;">{{data.wordCount}}</text>万字<br>
					<text class="text-gray" >{{data.isSerial ? '连载' : '完结'}}</text>
				</view>
				<view class="text-center padding-tb-sm" style="font-size: 22upx;" v-if="data.latelyFollower">
					<text style="font-size: 36upx;font-weight: 600;padding-right: 5upx;">{{data.latelyFollower}}</text>万人<br>
					<text class="text-gray" >收藏</text>
				</view>
				<view class="text-center padding-tb-sm" style="font-size: 22upx;" v-if="data.retentionRatio">
					<text style="font-size: 36upx;font-weight: 600;padding-right: 5upx;">{{data.retentionRatio}}</text>%<br>
					<text class="text-gray" >好评率</text>
				</view>
				<view class="text-center padding-tb-sm" style="font-size: 22upx;" v-if="data.chaptersCount">
					<text style="font-size: 36upx;font-weight: 600;padding-right: 5upx;">{{data.chaptersCount}}</text>章<br>
					<text class="text-gray" >总章数</text>
				</view>
			</view>
			<view class="padding-lr-sm">
				<view v-if="!zk" @click="open">
					<view class="cut">{{data.longIntro}}</view>
					<view style="height: 1upx;"></view>
				</view>
				<view v-if="zk" style="padding: 20upx;line-height: 50upx;">{{data.longIntro}}</view>
			</view>			
		</view>		
		<view class="margin-top bg-white shadow flex justify-between padding-sm">
			<view class="padding-sm flex">
				<view class="text-black">最新：</view>
				<view class="text-gray text-cut" style="width: 460upx;" @click="ToRead(lastcid)">{{lasttitle ? lasttitle : '加载中...'}}</view>
			</view>
			<view class="padding-left-sm padding-tb-sm text-gray solid-left" @tap="showModal" data-target="DrawerModalR">
				<text class="padding-right-sm" >目录</text>
				<text class="cuIcon-unfold"></text>
				</view>
		</view>
		
		<view class="margin-top bg-white shadow" v-if="splist">
			<view  class="cu-bar bg-white" style="min-height: 68upx;font-weight: 550;" >
				<view class="action">
					<text class="cuIcon-title text-blue" ></text> 书友评论
				</view>
				<view class="margin-right-sm text-gray" style="font-size: 12px;font-weight: 300;" @click="moreSp">更多<text class="cuIcon-right"></text></view>
			</view>
			
			<view class="padding-lr-sm padding-bottom-sm">
				<view class="flex solid-bottom padding-top-sm" v-for="(item,index) in splist" :key="index" @click="shuping(index)">
					<image class="margin-sm round solid shadow" style="width: 10%;" :src="'http://statics.zhuishushenqi.com'+item.author.avatar" mode="widthFix"></image>
					<view class="margin-left-sm margin-tb-sm" style="width: 90%;">
						<view class="text-sm text-gray" style="height: 48upx;">
							<view style="line-height: 48upx;">{{item.author.nickname}}</view>
						</view>
						<view class="text-black" style="line-height: 48upx;">{{item.title}}</view>
						<view class="flex justify-between text-sm text-gray" style="margin-top: 10upx;">
							<view style="line-height: 48upx;">{{item.updated}}</view>
							<view class="cuIcon-appreciate"><text style="padding-right: 10upx;">{{item.likeCount}}</text></view>
						</view>
					</view>
				</view>
				<view class="text-sm text-gray text-center margin-top-sm"  @click="moreSp">--　{{text}}　--</view>
			</view>
		</view>

		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal" >
			<view class="cu-dialog basis-lg bg-white" style="flex-basis:260px" @tap.stop="" >
				<scroll-view  scroll-y="true" style="height: 95%;" :scroll-top="top">
				<view class="cu-list menu text-left" >
					<view class="cu-item" v-for="(item,index) in chapters" :key="index" >
						<view class="content text-cut" style="font-size: 24upx;width: 230px;" @click="ToRead(index)">
							<text :class="cid == index ? 'text-bold text-blue' : ''">{{item.title}}</text>
						</view>
					</view>
				</view>
				</scroll-view>
				<view class="text-sm text-gray text-right padding-sm align-center flex justify-between" style="height: 5%;" @tap="hideModal">
					<view>{{data.title}}</view>
					<view class="padding-left-sm solid-left cuIcon-order" @click.stop="" @click="order">倒序</view>
				</view>
			</view>
		</view>
		
		<view style="height: 60px;"></view>
		
		<view class="cu-bar bg-white tabbar border shop shadow" style="position: fixed;bottom: 0;width: 100%;">
			<navigator class="action text-gray" style="width: 25%;" open-type="reLaunch" url="../../pages/concourse/concourse" >
				<view class="cuIcon-home"></view> 返回搜书
			</navigator>
			<view class="action" :class="history ? 'text-red' : 'text-gray'" style="width:25%;" @click="isShelf">
				<view :class="history ? 'cuIcon-favorfill' : 'cuIcon-favor'"></view> {{history ? '已在书架' : '加入书架'}}
			</view>
			<view v-if="history" class="bg-red submit" @click="ToRead(history.cid)">继续阅读</view>
			<view v-else class="bg-red submit" @click="ToRead(0)">开始阅读</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">少侠请见谅</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-lg" style="line-height: 65upx;">
					这本《{{data.title}}》暂未收录<br>
					点击“催更”督促更书！
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="toIndex">返回首页</button>
						<button class="cu-btn bg-green margin-left" @tap="toBack">催更江湖</button>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				
				<scroll-view scroll-y="true" :style="{height: winheight}" class="padding-xl text-left">
					<text style="line-height:60upx;font-size: 32upx;">{{spindex.content}}</text>
					<view class="text-sm text-center text-gray margin-top">-- 到底了 --</view>
				</scroll-view>
				<view class="cu-bar bg-white shadow">
					<view class="text-gray text-cut " style="width: 65%;margin-left: 10px;">{{spindex.title}}</view>
					<view class="action text-blue" @tap="hideModal">收起</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	var that;
	var id;
	var history;
	var nid;
	var limit = 10;
	export default {
		data() {
			return {
				data : [],
				zk : null,
				modalName : null,
				chapters : null,
				history : null,
				cid : 0,
				nid : null,
				top : 0,
				lasttitle:null,
				lastcid:null,
				splist : [],
				spindex:0,
				winheight : null,
				text : '加载更多'
			}
		},
		
		async onLoad(option) {
			that = this
			id = option.id
			uni.showLoading({
					title: '少侠稍候'
			});
			that.util.get('VueBook',{id : id})
			.then(res=>{
				var data = res
				// #ifdef H5
				document.title = data.title;
				var wx = that.util.jssdk() 
				wx.ready(function () {	
					var sharedata = {
						title: data.title,
						desc: data.longIntro,
						imgUrl: data.cover,
						success: function(){
							
						},
						cancel: function(){							
						}
					};
					wx.onMenuShareAppMessage(sharedata);
					wx.onMenuShareTimeline(sharedata);						
				});
				// #endif
				history = uni.getStorageSync(id)
				that.history = history
				that.data = data
				that.splist = data.bybook
				nid = data.nid
				var chapters = data.chapter
				if (!chapters || chapters.length < 1 ) {
					that.modalName = 'DialogModal1'
				}
				that.data.chaptersCount = chapters.length-1
				var last = chapters[chapters.length-1]
				that.nid = data.nid
				that.cid = history.cid
				that.chapters = chapters
				that.lasttitle = last.title
				that.lastcid = chapters.length-1
				uni.hideLoading();
			})			
		},
		async onReady() {
			var setting = await that.util.setting()			
		},
		methods: {
			open(){
				that = this
				that.zk = true
			},
			
			moreSp(){
				that = this
				if (limit > 50) {
					that.text = '没有更多了'
				}else{
					that.util.request({
						'url' : 'VueByBook',
						'data' : {
							id : id,
							limit : limit,
						},
						success:function(res){
							that.splist = res.data.data
							limit = limit+5
						}
					})
				}
			},
			order(){
				that.chapters = that.chapters.reverse()
			},
			shuping(e){
				var allheight =  uni.getSystemInfoSync();
				that.winheight = (allheight.windowHeight-50)+'px'
				that.modalName = 'bottomModal'
				that.spindex = {
					title : that.splist[e].title,
					content : that.splist[e].content
				}
			},
			
			isShelf() {
				if (that.history) {
					uni.removeStorage({
						key: that.data.id,
					});
					uni.removeStorage({
						key: 'nowbook',
					});
					that.history = null
				} else{
					uni.setStorage({
						key: id,
						data: {'pgindex' : 1 , 'cid' : 0 , 'nid' : that.nid , 'id' : that.data.id}
					});
					that.history = {'pgindex' : 1 , 'cid' : 0 , 'nid' : that.nid , 'id' : that.data.id}
				}
			},
			
			ToRead(e){
				that = this
				that.modalName = null
				uni.navigateTo({
					url: '/pages/read/read?nid='+that.nid+'&cid='+e+'&id='+id+'&lastcid='+that.data.lastcid
				});
			},
			
			showModal(e) {
				var modaln = e.currentTarget.dataset.target
				if (modaln = 'DrawerModalR') {
					uni.showLoading({
							title: '少侠稍候'
					});
					that.$nextTick(function() {
					    that.top = (history.cid-1)*50
							that.modalName = modaln
							uni.hideLoading();
					});
				}
				
			},
			hideModal(e) {
				that.winheight = null
				this.modalName = null
			},
			
			toIndex(){
				uni.reLaunch({
					url: '/pages/concourse/concourse'
				});
			},
			
			toBack(){
				this.modalName = null
				that.util.request({
					'url' : 'VueAddBook',
					'data' : {
						title : that.data.title
					},
					success:function(res){
						var rest = res.data.data
						if (rest == true) {
							
							uni.showToast({
								title: '催更成功',
								duration: 1500,
								mask : true
							});
							setTimeout(function () {
								uni.navigateBack({delta: 1});
							}, 1500);
						}
					}
				})
			},

		}
	}
</script>

<style>
	page{background-color:#fbfbfb;}
	.bg-top{
		filter: blur(10px);
		height: 200px;
		background-size:cover;  
	}
	
	.book-top{
		height: 200px;
		color: #fff;
		background: linear-gradient(45deg, #333333, #6739b6);
		opacity: 0.4;
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 999;
	}
	
	.text-bot{
		font-size: 26upx;
		color: #e0e0e0;
		font-weight: 500;
		line-height: 50upx;
	}
	
	.cut {
		margin:20upx;
		position:relative;
    line-height:50upx;
    height:100upx;
    overflow:hidden;
	}
	
	.cut::after {
		background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(20%, white));		
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white);            
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white);
		color: #007AFF;
    content:"... 展开";
    position:absolute;
    bottom:0;
    right:0;
		padding-left: 30upx;
		padding-right: 10upx;
 }

</style>
